<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蜗牛二手图书交易网首页</title>
    <!--引入资源：vue要在element之前引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <!--第一行：头部-->
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-light">
                            <el-link type="info" :href="'/index.html'">蜗牛学苑</el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="10" offset="7">
                        <el-form ref="user" :model="user" width="500px" label-width="80px">
                            <el-form-item label="登录名称">
                                <el-input v-model="user.name" placeholder="请输入登录名称"></el-input>
                            </el-form-item>
                            <el-form-item label="登录密码">
                                <el-input type="password" v-model="user.password" placeholder="请输入登录密码"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <!-- javascript:void(0) 阻止默认的链接行为-->
                                <a href="javascript:void(0)" @click="flushCode">
                                    <img :src="imgsrc">
                                </a>
                                <a href="javascript:void(0)" @click="flushCode">看不清楚，换一张</a>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="user.validateCode" placeholder="请输入验证码"/>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="login">登录</el-button>
                                <el-link type="success" :href="'/register.html'">如无账号，请先注册</el-link>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>

            </el-main>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                user:{},
                imgsrc:'/kaptcha/image'
            }
        },
        methods: {
            flushCode(){
                // 请求地址添加时间戳，让每次请求地址都不一样，阻止浏览器读取缓存。
                this.imgsrc = this.imgsrc + '?d=' + new Date();
            },
            login(){
                axios.post(`/user/login`,this.user).then(resp=>{
                    if (resp.data.code == 200) {
                        // 获取后台返回的token
                        let token = resp.data.data;
                        // 存储到localStorage本地缓存中，这样后面在任何页面都可以获取
                        localStorage.setItem("token",token);
                        // 跳转到主页
                        location.href = '/index.html';
                    } else {
                        this.$message.error('登录失败！')
                    }
                })
            }
        },
        created(){
        }
    })
</script>
</html>